<template>
  <div class="ProjectManageDetail">
    <div class="content">
      <!--基本信息-->
      <div class="base-info">
        <div class="title-info">基本信息</div>
        <div class="val-info">
          <a-form-model :model="project" ref="form" :rules="rules" >
            <a-row type="flex">
              <a-col :span="12">
                <a-form-model-item label="唯一标识:" :label-col="{ span: 2 }" :wrapper-col="{ span: 10 }">
                  <a-input disabled aria-readonly=true  v-model="project.id" style="width: 695px;"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="项目名称:" :label-col="{ span: 2 }" :wrapper-col="{ span: 10 }">
                  <a-input disabled aria-readonly=true v-model="project.projectName" style="width: 695px;"/>
                </a-form-model-item>
              </a-col>

            </a-row>
            <a-row class="row">
              <a-col :span="24">
                <a-form-model-item label="项目图标:" prop="category" :label-col="{ span: 1 }" :wrapper-col="{ span: 23 }">
                  <a-input style="vertical-align: top" v-model="data.icon">
                    <span slot="addonAfter" class="select-icon" @click="showIconPanel" v-if="!project.icon">选择</span>
                    <i :class="[project.icon]" slot="addonAfter" class="iconfont select-icon f18" v-if="iconShow"
                       @click="showIconPanel"></i>
                    <a-icon :type="data.icon" slot="addonAfter" class="select-icon f18" v-if="!iconShow"
                            @click="showIconPanel"></a-icon>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type="flex">
              <a-col :span="24">
                <a-form-model-item label="项目备注:" prop="desc" style="margin-bottom: 1em" :label-col="{ span: 1 }" :wrapper-col="{ span: 23 }">
                  <a-input type="textarea" disabled aria-readonly=true  style="width: 1460px;vertical-align: top"
                           v-model="project.description" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
      </div>
      <!--项目统计-->
      <div class="xmtj">
        <div class="tit">项目统计</div>
        <div class="val">
          <div class="item">
            <div class="num">{{project.interfaceCount}}</div>
            <div class="text">接口数</div>
          </div>
          <div class="item">
            <div class="num">0</div>
            <div class="text">接口用例数</div>
          </div>
          <div class="item">
            <div class="num">0</div>
            <div class="text">文档数</div>
          </div>
          <div class="item">
            <div class="num">0</div>
            <div class="text">数据模型数</div>
          </div>
          <div class="item">
            <div class="num">0</div>
            <div class="text">测试用例数</div>
          </div>
          <div class="item">
            <div class="num">0</div>
            <div class="text">测试套件数</div>
          </div>
        </div>
      </div>
      <!--在线分享-->
      <div class="share">
        <div class="tit">
          在线分享
        </div>
        <div class="tip">
          <a-icon type="info-circle"/>
          将接口文档以 URL 形式分享出去，方便外部团队在线查看！
        </div>
        <div class="btn">
          <span>+ 新建分享</span>
        </div>
      </div>
      <div class="tools">
        <!--自动导入-->
        <div class="item">
          <div class="tit">自动导入</div>
          <div class="tip">
            <a-icon type="info-circle"/>
            自动将 OpenAPI (Swagger) 或 apiDoc 格式的在线 URL 口数定时导入到 Apifox。
          </div>
          <div class="btn">
            <a-icon type="interaction"/>
            去开启
          </div>
        </div>
        <!--代码生成-->
        <div class="item">
          <div class="tit">代码生成</div>
          <div class="tip">
            <a-icon type="info-circle"/>
            根据接口/模型定义，自动生成各种语言/框架(如TypeScript、 Java、 Go、 Swift、 ObjectiveC、 Kotlin、 Dat、C++、C#、Rust等 130种语言及框架) 的业务代码(如 Model、 Controller、单元测试代码等)
          </div>
          <div class="btn">
            <a-icon type="code"/>
            立即生成
          </div>
        </div>
      </div>
      <!--操作-->
      <div class="opt">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="前置操作">
            <div class="tip">
              <p></p>
              <a-icon type="info-circle"/>
              全局前置操作，项目内所有接口运行时都会执行此处设置的前置操作。
            </div>
            <div class="btn">
              <span>添加前置操作 <a-icon type="down"/></span>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="后置操作">
            <div class="tip">
              <p></p>
              <a-icon type="info-circle"/>
              后置操作
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="Auth">
            <div class="tip">
              <p></p>
              <a-icon type="info-circle"/>
              Auth
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="更多设置">
            <div class="tip">
              <p></p>
              <a-icon type="info-circle"/>
              更多设置
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import {getColumns} from '@/api/tableColumns'

  export default {
    name: 'ProjectView',
    data() {
      return {
        data: {},
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {min: 1, max: 50, message: '长度不得超过50'}
          ],
          code: [
            {required: true, message: '请输入编码', trigger: 'blur'},
            {min: 1, max: 50, message: '长度不得超过50'}
          ],
          nick: [
            {required: true, message: '请输入别名', trigger: 'blur'},
            {min: 1, max: 50, message: '长度不得超过50'}
          ],
          businessModelId: [
            {required: true, message: '请选择业务模型', trigger: 'blur'}
          ]
        },
        layout: {
          labelCol: {span: 6},
          wrapperCol: {span: 18}
        },
        pathParamData: [],
        responseActiveKey: '1',
        showCodeList: false,
        newResponseTabIndex: 0,
        newExampleTabIndex: 0,
        examplePanes: [],
        exampleActiveKey: '',
        activeItem: 'none',
      }
    },
    props: {
      project: {
        type: Object,
        default: () => ({})
      },
      type: {
        type: String,
        default: ''
      }
    },
    created() {
      console.log(this.project)
    },
    methods: {
      showIconPanel() {
        const name = this.data.name || ''
        this.$dialog({
          title: `选择${name}图标`,
          content: () => import('@/components/Settings/widget/SelectIconCtl'),
          width: 1000,
          centered: true,
          maskClosable: false,
          bodyStyle: {
            padding: '5px',
            height: '700px',
            overflow: 'auto'
          },
          props: {
            defaultIconName: this.data.icon
          },
          on: {
            ok: (dialog) => {
              const selectIcon = dialog.getDialogCtl().selectIconName
              if (selectIcon) {
                this.$set(this.data, 'icon', selectIcon)
              }
              dialog.closeDialog()
            }
          }
        })
      }
    },
    watch: {},
    computed: {
      iconShow() {
        return this.data.icon && this.data.icon.includes('icon-')
      }
    },
  }
</script>

<style lang="less" scoped>
  .ProjectManageDetail {
    padding-top: 10px;
    display: flex;
    .content {
      width: 100%;
      height: 100%;
      position: relative;

      .base-info {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
        padding: 10px 15px;
        margin-bottom: 20px;
        .title-info {
          text-align: left;
          font-size: 17px;
          margin-bottom: 10px;
        }
        .val-info {
          /*display: flex;*/
          /*justify-content: space-between;*/
        }
      }

      .xmtj {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
        padding: 10px 15px;
        margin-bottom: 20px;
        .tit {
          text-align: left;
          font-size: 17px;
          margin-bottom: 10px;
        }
        .val {
          display: flex;
          justify-content: space-between;
          .item {
            width: 16%;
            .num {
              font-size: 20px;
              margin-bottom: 10px;
              font-weight: 500;
            }
          }

        }
      }
      .share {
        width: 100%;
        height: 120px;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
        padding: 10px 15px;
        margin-bottom: 20px;
        .btn {
          text-align: center;
          color: #2BAEF2;
          span {
            cursor: pointer;
          }
        }
      }
      .tools {
        width: 100%;
        height: 155px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .item {
          width: 49%;
          height: 100%;
          border-radius: 5px;
          border: 1px solid #e8e8e8;
          padding: 10px 15px;
          position: relative;
          .btn {
            position: absolute;
            bottom: 10px;
            width: 90px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 3px;
            background-color: #f0fcff;
            cursor: pointer;
            color: #2BAEF2;
          }
        }
      }
      .opt {
        width: 100%;
        height: 200px;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
        padding: 10px 15px;
        .btn {
          margin-top: 30px;
          text-align: center;
          span {
            cursor: pointer;
            color: #2BAEF2;
            i {
              font-size: 10px !important;
            }
          }
        }
      }


      .newInterface {
        padding: 15px;
        height: 90%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        .top {
          width: 100%;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .path {
            width: 100%;
            height: 100%;
            margin-right: 15px;
            display: flex;
            align-items: center;
            .type {
              display: flex;
              align-items: center;
              width: 110px;
              height: 100%;
              /deep/ .ant-select-selection--single {
                height: 35px;
                display: flex;
                align-items: center;
                border-radius: 5px 0 0 5px;
              }
            }
            .url {
              width: 100%;
              height: 100%;
              /deep/ .ant-input {
                border-left: none;
                border-radius: 0 5px 5px 0;
              }
            }
          }
        }
        .form {
          padding-top: 15px;
          /deep/ .ant-col-8 {
            padding-right: 15px;
          }
        }
        .parameter {
          .tit {
            font-size: 17px;
            margin-bottom: 10px;
          }
          .request-tabs {
            margin-bottom: 40px;
            .tab-name {
              display: flex;
              align-items: center;
              .num {
                font-size: 12px;
                width: 16px;
                height: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #5657580A;
                border-radius: 50%;
                color: #4CAF50;
                margin-left: 5px;
                font-weight: 400;
              }
            }
            .tit {
              padding-top: 10px;
              color: rgba(0, 0, 0, 0.5);
              i {
                margin-left: 20px;
              }
            }
            /deep/ .ant-table-tbody {
              td {
                padding: 0 !important;
              }
            }
            input {
              border: none;
            }
            .table {
              /deep/ .ant-select {
                width: 100%;
                .ant-select-selection {
                  border: none;
                }
              }
            }
            .bodyList {
              padding-top: 15px;
              display: flex;
              .item {
                display: inline-block;
                margin-right: 15px;
                padding: 0 10px;
                border-radius: 8px;
                cursor: pointer;
                &:hover {
                  color: #2BAEF2;
                }
              }
              .activeItem {
                background-color: #2BAEF2;
                color: white;
                &:hover {
                  color: white;
                }
              }
            }
            .bodyContent {
              padding-top: 10px;
              .no {
                height: 100px;
                line-height: 100px;
                text-align: center;
                border-radius: 5px;
                border: 1px solid #e8e8e8;
                color: rgba(0, 0, 0, 0.3);
              }
            }
            .headerContent,
            .cookieContent {
              padding-top: 15px;
            }
            .authContent {
              padding-top: 20px;
              height: 120px;
              display: flex;
              justify-content: center;
              align-items: center;
              .tit {
                color: #555;
                margin-right: 20px;
              }
            }
          }
          .response-tabs {
            position: relative;
            .addTab {
              height: 30px;
              display: inline-block;
              position: absolute;
              top: 15px;
              right: 15px;
              cursor: pointer;
              color: #2BAEF2;
              z-index: 1000;
            }
            .response-content {
              min-height: 250px;
              .top {
                padding: 30px;
                display: flex;
                justify-content: center;
                .input {
                  width: 60px;
                  height: 32px;
                  position: relative;
                  margin-right: 30px;
                  .codeList {
                    width: 300px;
                    height: 200px;
                    overflow-y: auto;
                    border: 1px solid #e8e8e8;
                    border-radius: 5px;
                    padding: 5px;
                    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.05);
                    position: absolute;
                    left: 0;
                    top: 35px;
                    background-color: white;
                    z-index: 1000;
                    .item {
                      width: 100%;
                      height: 30px;
                      padding: 0 15px;
                      line-height: 30px;
                      border-radius: 5px;
                      text-align: left;
                      color: rgba(0, 0, 0, 0.65);
                      cursor: pointer;
                      position: relative;
                      &:hover {
                        background-color: #f0fcff;
                        color: #2BAEF2;
                      }
                      span {
                        margin-left: 15px;
                        color: lightgray;
                      }
                      i {
                        position: absolute;
                        top: 8px;
                        right: 10px;
                        color: lightgray;
                        cursor: pointer;
                        color: rgba(0, 0, 0, 0.65);
                      }
                    }
                  }
                }
                .input2 {
                  width: 100px;
                  margin-right: 30px;
                }
                .input3 {
                  width: 150px;
                }
              }
              .btns {
                padding-top: 15px;
                display: flex;
                justify-content: center;
                .item {
                  display: inline-block;
                  padding: 5px 10px;
                  margin-right: 30px;
                  cursor: pointer;
                  border-radius: 5px;
                  background-color: #fafafa;
                  color: #2BAEF2;
                }
              }
            }

          }
          .response-example {
            position: relative;
            .addExample {
              height: 100px;
              border-radius: 5px;
              border: 1px solid #e8e8e8;
              display: flex;
              align-items: center;
              justify-content: center;
              .btn {
                display: inline-block;
                padding: 10px 15px;
                border-radius: 5px;
                cursor: pointer;
                background-color: #fafafa;
                color: #2BAEF2;
              }
            }
            .addTab {
              height: 30px;
              display: inline-block;
              position: absolute;
              top: 15px;
              right: 15px;
              cursor: pointer;
              color: #2BAEF2;
              z-index: 1000;
            }
            .example-content {
              min-height: 200px;
            }
          }
        }
      }
      .footer {
        width: 100%;
        height: 10%;
        font-weight: bold;
        border-top: 1px solid #e8e8e8;
        padding-left: 20px;
        div {
          width: 30px;
          height: 30px;
          line-height: 30px;
          border-radius: 3px;
          cursor: pointer;
          text-align: center;
          &:hover {
            background-color: #e8e8e8;
          }
        }
      }
    }
    .content2 {
      width: 100%;
    }
  }
</style>
